<template>
  <div>
    <div class="row-item row-main padding-16">
      <h1 class="demo">用户中心</h1>
    </div>
    <!-- 用户信息 vip充值引导 消息通知-->
    <div class="card padding-16">
      <div class="card-cell radius-9">
        <template v-if="false">
          <p class="demo mar-9 row-ymain">
            我不是周杰伦
            <img class="icon-sty" src="@/assets/static/男.png" alt="" />
            <img class="icon-sty" src="@/assets/static/VIP.png" alt="" />
          </p>
          <p class="demo sm-font mar-9">积分: <span>16082</span></p>
          <p class="demo sm-font mar-9">等级: <span>6</span></p>
          <p class="demo sm-font mar-9">Vip: <span>尊贵Drinker</span></p>
        </template>
        <template>
          <div class="no-login" @click.stop="handlerJoin">
            <img class="goLogin" src="@/assets/static/go.png" alt="" />
            <p class="demo">点击登录</p>
          </div>
        </template>
      </div>
      <div class="card-cell radius-9">
        <div class="cell-item row-xmain row-ymain">
          <img class="vip-icon" src="@/assets/static/VIP.png" alt="" />
          <div class="mask hvr-bounce-to-top"></div>
        </div>
        <div class="cell-item row-xmain row-ymain">
          <img class="vip-icon" src="@/assets/static/消息.png" alt="" />
          <div class="mask hvr-bounce-to-top"></div>
        </div>
      </div>
    </div>
    <!-- 关于我们 当前版本 修改信息-->
    <van-cell-group inset class="mar-3">
      <van-cell title="用户协议" icon="label-o" />
      <van-cell title="我的信息" icon="edit" />
      <van-cell @click="handlerTo(2)" title="关于作者" icon="contact" />
      <van-cell @click="handlerTo(3)" title="当前版本" icon="apps-o" />
      <van-cell title="给个评分" icon="flower-o" />
    </van-cell-group>
    <!-- 问题咨询 -->
    <div class="row-xmain row-ymain marT-16">
      <p class="demo problem">问题反馈~</p>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "UserCenter",
  methods: {
    handlerJoin() {
      this.CHANGE_TABAR(false);
      this.$router.push({
        path: "/login",
      });
    },
    handlerTo(val) {
      switch (val) {
        case 2:
          {
            this.$toast({
              message: "Airhang,让一切变更有意义",
              position: "bottom",
            });
          }
          break;
        case 3: {
          this.$toast({
            message: "当前为测试版~",
            position: "bottom",
          });
        }
      }
    },
    ...mapMutations("Tabar", ["CHANGE_TABAR"]),
  },
};
</script>

<style scoped>
.vip-icon {
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
  object-fit: cover;
}
.goLogin {
  width: 6.25rem;
  height: auto;
  object-fit: cover;
  display: inline-block;
}
.no-login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-login > p {
  font-weight: 100;
  font-size: 0.8125rem;
}
.mask {
  width: 100%;
  height: 1rem;
  position: absolute;
  bottom: 0;
}
.problem {
  color: #eeeeee;
}
</style>